﻿<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>任务管理</title>
    <link href="//unpkg.com/layui@2.9.18/dist/css/layui.css" rel="stylesheet">
    <style>
        /* 自定义样式，使文本域宽度变宽 */
        .wide-textarea {
            width: 100%;
        }
    </style>
</head>
<body>
    <h3 style="text-align:center">任务列表页面</h3>

    <form class="layui-form" action="" style="margin:25px">
        <div>
            <button type="button" class="layui-btn layui-bg-blue" onclick="showAdvancedSearch()">高级查询</button>
            <button type="button" class="layui-btn layui-bg-green" onclick="showEditForm()">编辑</button>
            <button type="button" class="layui-btn layui-bg-red" onclick="deleteData()">删除</button>
        </div>
    </form>

    <div style="margin:25px">
        <table id="processTable" class="layui-table">
            <thead>
                <tr>
                    <th><input type="checkbox" id="selectAll"></th>
                    <th>工序名称</th>
                    <th>工序编号</th>
                    <th>报工权限</th>
                    <th>报工配数比</th>
                    <th>不良品项列表</th>
                    <th>计划开始时间</th>
                    <th>计划结束时间</th>
                    <th>计划数</th>
                    <th>良品数</th>
                    <th>不良品数</th>
                    <th>实际开始时间</th>
                    <th>实际结束时间</th>
                    <th>创建时间</th>
                    <th>创建人</th>
                    <th>修改人</th>
                    <th>修改时间</th>
                </tr>
            </thead>
            <tbody>
                <!-- 装配工单列表数据将填充在这里 -->
            </tbody>
        </table>
    </div>

    <script src="//unpkg.com/layui@2.9.18/dist/layui.js"></script>
    <script src="//unpkg.com/jquery/dist/jquery.js"></script>
    <script>
        layui.use(['layer', 'form', 'element', 'table'], function () {
            var layer = layui.layer;
            var form = layui.form;
            var element = layui.element;
            var table = layui.table;

            // 全选和反选
            $('#selectAll').click(function () {
                $('.itemCheckbox').prop('checked', $(this).prop('checked'));
                form.render('checkbox');
            });

            // 单项选择时检查是否全选
            $('body').on('click', '.itemCheckbox', function () {
                if ($('.itemCheckbox:checked').length === $('.itemCheckbox').length) {
                    $('#selectAll').prop('checked', true);
                } else {
                    $('#selectAll').prop('checked', false);
                }
                form.render('checkbox');
            });

            $(function () {
                search();
            });

            // 加载工序列表
            function search(params = {}) {
                $.post({
                    url: '@ViewBag.Durian' + '/api/Assembly/Handle1',
                    data: JSON.stringify(params), // 使用 JSON 格式
                    async: false,
                    dataType: "json",
                    contentType: "application/json",
                    success: res => {
                        console.log(res); // 修正控制台打印
                        var count = "";
                        $.each(res.data, function () {
                            count += `<tr>
                                              <td><input type="checkbox" class="itemCheckbox" value="${this.assemblyNumber}"></td>
                                              <td>${this.processName}</td>
                                              <td>${this.assemblyNumber}</td>
                                              <td>${this.reportingAuthority}</td>
                                              <td>${this.reportingRatio}</td>
                                              <td>${this.defectItemList}</td>
                                              <td>${this.plannedStartTime}</td>
                                              <td>${this.plannedEndTime}</td>
                                              <td>${this.plannedQuantity}</td>
                                              <td>${this.goodQuantity}</td>
                                              <td>${this.defectiveQuantity}</td>
                                              <td>${this.actualStartTime}</td>
                                              <td>${this.actualEndTime}</td>
                                              <td>${this.createDate}</td>
                                              <td>${this.creator}</td>
                                              <td>${this.modifier}</td>
                                              <td>${this.modifyDate}</td>
                                              </tr>`;
                        });
                        $("tbody").html(count);

                        // 渲染进度条
                        element.init();
                    }
                });
            };

            // 显示高级查询的弹框
            window.showAdvancedSearch = function () {
                layer.open({
                    type: 1,
                    title: '高级查询',
                    area: ['600px', 'auto'],
                    content: `
                                <form class="layui-form" id="advancedSearchForm">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">工序编号</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="searchProcessNumber" name="searchProcessNumber" placeholder="请输入工序编号" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">工序名称</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="searchProcessName" name="searchProcessName" placeholder="请输入工序名称" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">不良品项列表</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="searchDefectItemList" name="searchDefectItemList" placeholder="请输入不良品项列表" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">计划开始时间</label>
                                        <div class="layui-input-inline">
                                            <input type="date" id="searchPlannedStartTime" name="searchPlannedStartTime" class="layui-input">
                                            至
                                            <input type="date" id="searchPlannedStartTime" name="searchPlannedStartTime" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">计划结束时间</label>
                                        <div class="layui-input-inline">
                                            <input type="date" id="searchPlannedEndTime" name="searchPlannedEndTime" class="layui-input">
                                            至
                                            <input type="date" id="searchPlannedEndTime" name="searchPlannedEndTime" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">计划数</label>
                                        <div class="layui-input-inline">
                                            <input type="number" id="searchPlannedQuantity" name="searchPlannedQuantity" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">良品数</label>
                                        <div class="layui-input-inline">
                                            <input type="number" id="searchGoodQuantity" name="searchGoodQuantity" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">不良品数</label>
                                        <div class="layui-input-inline">
                                            <input type="number" id="searchDefectiveQuantity" name="searchDefectiveQuantity" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">实际开始时间</label>
                                        <div class="layui-input-inline">
                                            <input type="date" id="searchActualStartTime" name="searchActualStartTime" class="layui-input">
                                            至
                                            <input type="date" id="searchActualStartTime" name="searchActualStartTime" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">实际结束时间</label>
                                        <div class="layui-input-inline">
                                            <input type="date" id="searchActualEndTime" name="searchActualEndTime" class="layui-input">
                                            至
                                            <input type="date" id="searchActualStartTime" name="searchActualStartTime" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">创建时间</label>
                                        <div class="layui-input-inline">
                                            <input type="date" id="searchCreateDate" name="searchCreateDate" class="layui-input">
                                            至
                                            <input type="date" id="searchCreateDate" name="searchCreateDate" class="layui-input">
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <button type="button" class="layui-btn" onclick="performAdvancedSearch()">查询</button>
                                    </div>
                                </form>
                            `
                });

                // 渲染表单元素
                form.render();
            };

            // 执行高级查询
            window.performAdvancedSearch = function () {
                var processNumber = document.getElementById('searchProcessNumber').value;
                var processName = document.getElementById('searchProcessName').value;
                var defectItemList = document.getElementById('searchDefectItemList').value;
                var plannedStartTime = document.getElementById('searchPlannedStartTime').value;
                var plannedEndTime = document.getElementById('searchPlannedEndTime').value;
                var plannedQuantity = document.getElementById('searchPlannedQuantity').value;
                var goodQuantity = document.getElementById('searchGoodQuantity').value;
                var defectiveQuantity = document.getElementById('searchDefectiveQuantity').value;
                var actualStartTime = document.getElementById('searchActualStartTime').value;
                var actualEndTime = document.getElementById('searchActualEndTime').value;
                var createDate = document.getElementById('searchCreateDate').value;

                var params = {};
                if (processNumber) {
                    params.processNumber = processNumber;
                }
                if (processName) {
                    params.processName = processName;
                }
                if (defectItemList) {
                    params.defectItemList = defectItemList;
                }
                if (plannedStartTime) {
                    params.plannedStartTime = plannedStartTime;
                }
                if (plannedEndTime) {
                    params.plannedEndTime = plannedEndTime;
                }
                if (plannedQuantity) {
                    params.plannedQuantity = parseInt(plannedQuantity, 10);
                }
                if (goodQuantity) {
                    params.goodQuantity = parseInt(goodQuantity, 10);
                }
                if (defectiveQuantity) {
                    params.defectiveQuantity = parseInt(defectiveQuantity, 10);
                }
                if (actualStartTime) {
                    params.actualStartTime = actualStartTime;
                }
                if (actualEndTime) {
                    params.actualEndTime = actualEndTime;
                }
                if (createDate) {
                    params.createDate = createDate;
                }

                search(params); // 带参数搜索
                layer.closeAll(); // 关闭弹框
            };

            // 显示编辑工序的弹框
            window.showEditForm = function () {
                var selectedCheckboxes = $('.itemCheckbox:checked');
                if (selectedCheckboxes.length === 0) {
                    layer.msg('请选择一条记录进行编辑');
                    return;
                } else if (selectedCheckboxes.length > 1) {
                    layer.msg('只能选择一条记录进行编辑');
                    return;
                }

                var assemblyNumber = selectedCheckboxes.val();

                // 查找对应的行数据
                var rowData = null;
                $("#processTable tbody tr").each(function () {
                    if ($(this).find(".itemCheckbox").val() === assemblyNumber) {
                        rowData = {
                            assemblyNumber: $(this).find("td:eq(1)").text(),
                            assembliesNum: $(this).find("td:eq(2)").text(),
                            completedAssemblies: $(this).find("td:eq(3)").text(),
                            progress: $(this).find("td:eq(4) .layui-progress-bar").attr("lay-percent"),
                            remark: $(this).find("td:eq(5)").text(),
                            createDate: $(this).find("td:eq(6)").text(),
                            updateId: $(this).find("td:eq(7)").text(),
                            updateDate: $(this).find("td:eq(8)").text()
                        };
                        return false; // 停止循环
                    }
                });

                if (!rowData) {
                    layer.msg('未找到对应的数据');
                    return;
                }

                layer.open({
                    type: 1,
                    title: '编辑装配工单',
                    area: ['600px', 'auto'],
                    content: `
                                <form class="layui-form" id="editProcessForm">
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">单据编号</label>
                                        <div class="layui-input-inline">
                                            <input type="text" id="assemblyNumber" name="assemblyNumber" value="${rowData.assemblyNumber}" lay-verify="required" placeholder="请输入单据编号" class="layui-input" readonly>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <label class="layui-form-label">备注</label>
                                        <div class="layui-input-inline wide-textarea">
                                            <textarea id="remark" name="remark" placeholder="请输入备注" class="layui-textarea">${rowData.remark}</textarea>
                                        </div>
                                    </div>
                                    <div class="layui-form-item">
                                        <button type="button" class="layui-btn" onclick="Edit()">提交</button>
                                    </div>
                                </form>
                            `
                });

                // 渲染表单元素
                form.render();
            };

            // 定义编辑函数
            window.Edit = function () {
                var assemblyNumber = document.getElementById('assemblyNumber').value;
                var remark = document.getElementById('remark').value;

                // 验证表单数据
                if (!assemblyNumber || !remark) {
                    layer.msg('请填写所有必填项');
                    return;
                }

                var requestData = {
                    assemblyNumber: assemblyNumber,
                    remark: remark,
                };

                // 发送 AJAX 请求
                fetch('@ViewBag.Durian' + '/api/Assembly/Edit', {
                    method: 'PUT',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify(requestData)
                })
                    .then(response => response.json())
                    .then(data => {
                        layer.msg('编辑成功');

                        layer.closeAll(); // 关闭弹框
                        search(); // 编辑后加载工序列表
                    })
                    .catch(error => {
                        console.error('Error:', error);
                        layer.msg('编辑失败');
                    });
            };
        });
    </script>
</body>
</html>



